<script setup>
// 导入组件
import TreeMenu from './treeMenu.vue';
//  获取router
import { useRouter } from 'vue-router';
import { useStore } from 'Vuex';
import { reactive,computed } from 'vue';
const router = useRouter();
// 获取store
const store = useStore();
// const menuData = reactive(router.options.routes[0].children)
const menuData = computed(() =>store.state.menu.routerList)
const active = computed(() =>  store.state.menu.menuActive)
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}

// 侧边栏收缩
const isCollapse = computed(() => {
    return store.state.menu.isCollapse;
});

</script>

<template>
    <el-menu :style="{width:!isCollapse?'230px':'64px'}"  active-text-color="#ffd04b" background-color="#545c64"
    class="aside-container"
        text-color="#fff" @open="handleOpen" @close="handleClose"
        :collapse="isCollapse" :default-active="active">
        <p class="logo-lg">{{ !isCollapse?'DIDI陪诊':'DIDI' }}</p>
        <TreeMenu :menuData="menuData" :index="1" />
        <!-- <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <location />
                </el-icon>
                <span>Navigator One</span>
            </template>
<el-menu-item-group title="Group One">
    <el-menu-item index="1-1">item one</el-menu-item>
    <el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
    <el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
    <template #title>item four</template>
    <el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
    <el-icon><icon-menu /></el-icon>
    <span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
    <el-icon>
        <document />
    </el-icon>
    <span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
    <el-icon>
        <setting />
    </el-icon>
    <span>Navigator Four</span>
</el-menu-item> -->
    </el-menu>
</template>

<style scoped lang="less">
.aside-container {
    height: 100vh;

    .logo-lg {
        font-size: 20px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: #fff
    }
}
</style>
